<script setup lang="ts">
import {reactive, type Ref, ref} from 'vue'
import type {UserInfo} from '@/network/api/user.ts'
import {userInfo} from '@/stores/user.ts'
import type {FormRules} from 'element-plus'

const infoData: Ref<UserInfo> = ref(userInfo.value)

const rules = reactive<FormRules<UserInfo>>({
  id: [
    {required: true},
  ],
  account: [
    {required: true, message: '账号不能为空', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '用户名不能为空', trigger: 'blur'},
  ],
})

const accountInput: Ref<HTMLElement | undefined> = ref()
const nameInput: Ref<HTMLElement | undefined> = ref()

const isLoading = ref(false)

function updateClick() {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
    accountInput.value?.focus()
  }, 1000)
}
</script>

<template>
  <h3>个人信息</h3>
  <el-form
      label-width="auto"
      style="max-width: 300px"
      :rules="rules"
      ref="ruleForm"
      :model="infoData"
  >
    <el-form-item
        label="ID"
        prop="id"
    >
      <el-input
          v-model="infoData.id"
          disabled
      />
    </el-form-item>
    <el-form-item
        label="账号"
        prop="account"
    >
      <el-input
          v-model="infoData.account"
          placeholder="请输入账号"
          v-focus
          autofocus
          ref="accountInput"
          @keyup.enter="nameInput?.focus()"
      />
    </el-form-item>
    <el-form-item
        label="用户名"
        prop="name"
    >
      <el-input
          v-model="infoData.name"
          placeholder="请输入用户名"
          ref="nameInput"
          @keyup.enter="updateClick"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateClick" :loading="isLoading">
        {{ isLoading ? '正在修改' : '修改' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
